<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="shortcut icon" href=""> -->

    <title>Faeple / <spring:message code="common.title.register"/></title>
    <!--[if lt IE 10]>
    	<script src="/resources/js/placeholders.min.js"></script>
    <![endif]-->
    <style type="text/css">
    	body {
			background-image: url("/resources/img/signup_background.jpg")!important;
		}
    	.fb-sign-up{
    		background-color: #3A53A0;
    		width: 220px;
    		height: 34px;
    		display: block;
    		color: #fff!important;
    		padding-top: 8px;
    		text-align: center;
    		-webkit-border-radius: 3px;
    		border-radius: 3px;
    		text-decoration: none!important;
    	}
    	.introduce{
    		width: 540px;
    		float: left;
    		margin-right: 80px;
    	}
    	.registForm{
    		float: left;
    		width: 430px;
    		max-width: 430px;
    		padding: 25px;
    		border: 4px solid rgba(255, 255, 255, .8);
    		border-radius: 8px;
    		margin-bottom: 25px;
    		-webkit-transition: all 0.4s;
	    	-moz-transition: all 0.4s;
	    	-o-transition: all 0.4s;
	    	transition: all 0.4s;
    	}
    	.text-shadow{
    		text-shadow: 0px 2px rgba(0,0,0,0.15);
    		color: #fff;
    	}
    	.form-control{
    		background-color: rgba(255,255,255,0.65);
    		color: #303030;
    		border: 1px solid #DCE2E8;
    	}
    	.wrapper{
    		margin-top: 40px;
    	}
    	.font-white{
    		color: #fff;
    	}
    	.form-control:focus{
  			border: 1px solid #426CF2;
			-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
		}
		
		@media screen and (max-width: 1100px){
			.introduce{ width: 45%; margin-right: 0;}
			.registForm{ width: 50%; float: right; }
		}
		@media screen and (max-width: 768px){
			.introduce{ width: 100%; margin-right: 0; float: none; margin-bottom: 40px; }
			.registForm{ width: 100%; float: none; }
			.wrapper{ margin-top: 10px; }
		}
    </style>
</head>
<body>
<div id="viewport">
<div id="page">
	<!-- header -->
		<jsp:include page = "head.jsp" flush="false"/>
	<!-- header -->
   	<div class="container wrapper">
   		<div class="introduce">
   			<h1 class="text-shadow"><spring:message code="sign.welcome_txt1"/></h1>
   			<h3 class="text-shadow"><spring:message code="sign.welcome_txt2"/><br><spring:message code="sign.welcome_txt3"/></h3>
   		</div>
   		<div class="registForm">
   			<p style="color: #fff; font-weight: bold;"><spring:message code="sign.sns"/></p>
   			<button type="button" class="btn btn-facebook btn-block" title="<spring:message code="sign.fb"/>" onclick="fb_login();" style="position: relative;"><span style="position: absolute; left:15px;"><i class="fa fa-facebook fa-lg"></i></span><spring:message code="sign.fb"/></button>
   			<button type="button" class="btn btn-instagram btn-block" title="<spring:message code="sign.insta"/>"  onclick="window.open('https://api.instagram.com/oauth/authorize/?client_id=1211a537d5c444c8a06c8d73bdc93bc6&redirect_uri=http://faeple.com/connectInstgram&response_type=code','Instagram','resizable=no width=500 height=380 scrollbars=yes')" style="position: relative; border-radius:2px;"><img src="/resources/img/instagram-icon.png" width="20" height="20" style="position: absolute; left:15px;"><spring:message code="sign.insta"/></button>
   			<button type="button" class="btn btn-twitter btn-block" title="<spring:message code="sign.twitter"/>" onclick="window.open('/twitterLogin','twitter','resizable=no width=720 height=430')" style="position: relative;"><span style="position: absolute; left:15px;"><i class="fa fa-twitter fa-lg"></i></span><spring:message code="sign.twitter"/></button>
   			<button type="button" class="btn btn-kakao btn-block" title="<spring:message code="sign.kakao"/>" onclick="loginWithKakao();" style="position: relative;"><img src="/resources/img/kakao-icon.gif" width="15" height="15" style="position: absolute; left:15px; top: 8px;"><strong><spring:message code="sign.kakao"/></strong></button>
   			<form role="form" method="post" id="sign-form">
   				<div class="form-group" style="margin-top: 25px;">
    				<label for="inputEmail" class="font-white"><spring:message code="sign.email"/></label>
					<input type="text" class="form-control" id="inputEmail" name="inputEmail" title="<spring:message code="sign.email"/>" placeholder="<spring:message code="sign.email_ph"/>"  maxlength="45" tabindex="1" onblur="checkValidate(this.id);">
					<div id="emailState" style="margin-top: 7px;"></div>
				</div>
    			<div class="form-group">
    				<label for="inputPassword" class="font-white"><spring:message code="sign.passwd"/></label>
					<input type="password" class="form-control" id="inputPassword" name="inputPassword" title="<spring:message code="sign.passwd"/>" placeholder="<spring:message code="sign.passwd_ph"/>" onblur="checkValidate(this.id);" maxlength="20" tabindex="2" style="ime-mode:disabled;">
					<div id="passwordState" style="margin-top: 7px;"></div>
				</div>
				<div class="form-group">
    				<label for="inputId" class="font-white"><spring:message code="sign.id"/></label>
					<input type="text" class="form-control" id="inputId" name="inputId" title="<spring:message code="sign.id"/>" placeholder="<spring:message code="sign.id_ph"/>" onblur="checkValidate(this.id);" onkeyup="checkId(this.value);" onkeydown="fn_press_han(this)" maxlength="14" tabindex="3" style="ime-mode:disabled;">
					<div id="idState" style="margin-top: 7px;"></div>
				</div>
    			<div class="form-group">
    				<label for="inputName" class="font-white"><spring:message code="sign.name"/></label>
					<input type="text" class="form-control" id="inputName" name="inputName" title="<spring:message code="sign.name"/>" placeholder="<spring:message code="sign.name_ph"/>" onblur="checkValidate(this.id);" maxlength="30" tabindex="4">
					<div id="nameState" style="margin-top: 7px;"></div>
				</div>
  				<div class="form-group">
  					<div class="radio-inline" style="padding-left:0;">
						<label title="<spring:message code="common.female"/>" class="font-white"><input type="radio" name="optionsGender" id="optionsGender" value="female" tabindex="5"><span style="margin-left:6px;"><spring:message code="common.female"/></span></label>
					</div>
	    			<div class="radio-inline" style="padding-left:0;">
	    				<label title="<spring:message code="common.male"/>" class="font-white"><input type="radio" name="optionsGender" id="optionsGender" value="male" tabindex="6"><span style="margin-left:6px;"><spring:message code="common.male"/></span></label>
					</div>
				</div>
				<div id="signupButton"><button type="button" class="btn btn-info btn-lg btn-block" style="background-color: rgba(57, 179, 215, 0.65);" onclick="signup();" title="<spring:message code="sign.button"/>" tabindex="7" style="outline: 0;"><spring:message code="sign.button"/></button></div>
				<p style="font-weight: bold;margin-top:22px;text-align:center;"><a href="/business" style="color: #fff;" title="쇼핑몰이나 마켓을 운영중이시면 비즈니스 계정으로 가입하세요" data-toggle="tooltip">비즈니스 계정 만들기</a></p>
	    	</form>
   		</div><!-- end well -->
   	</div><!-- end container -->
</div><!-- end page -->
<%@ include file="commonScript.jsp" %>
</div><!-- end viewport -->
   	<script type="text/javascript">
		var check1 = false;
		var check2 = false;
		var check3 = false;
		var check4 = false;

		function checkValidate(id){
			
			var errorCss = "<span style='color:#BF0000;'><i class='glyphicon glyphicon-remove'></i>";
			var successCss = "<span style='color:#435743;'><i class='glyphicon glyphicon-ok'></i>";
			
			if($("#"+id).val() == ""){
				if(id == "inputEmail"){
					$("#emailState").html(errorCss+"&nbsp;<spring:message code='sign.email_err' javaScriptEscape='true'/></span>");
					$("#inputEmail").parent().addClass("form-group has-error");
				}else if(id == "inputPassword"){
					$("#passwordState").html(errorCss+"&nbsp;<spring:message code='sign.passwd_err' javaScriptEscape='true'/></span>");
					$("#inputPassword").parent().addClass("form-group has-error");
				}else if(id == "inputId"){ 
					$("#idState").html(errorCss+"&nbsp;<spring:message code='sign.id_err' javaScriptEscape='true'/></span>");
					$("#inputId").parent().addClass("form-group has-error");
				}else{
					$("#nameState").html(errorCss+"&nbsp;<spring:message code='sign.name_err' javaScriptEscape='true'/></span>");
					$("#inputName").parent().addClass("form-group has-error");
				}
			}else{
				if(id == "inputEmail"){
					eCheck=/^[_a-zA-Z0-9]+([-+.][_a-zA-Z0-9]+)*@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/i;
					if(eCheck.test($("#inputEmail").val())){
						var data = "email="+$("#inputEmail").val();
						$.ajax({
						    type : "get"
						    , url : "/checkEmail"
						    , data : data
						    , dataType : "text"
						    , timeout : 5000
						    , error : function(request, status, error) {
						    	
						    }
						    , success : function(response) {
						    	if(response == "true"){
						    		$("#emailState").html(successCss+"&nbsp;<spring:message code='sign.true' javaScriptEscape='true'/></span>");
						    		$("#inputEmail").parent().removeClass().addClass("form-group has-success");
						    		check1 = true;
						    	}else{
						    		$("#emailState").html(errorCss+"&nbsp;<spring:message code='sign.email_err2' javaScriptEscape='true'/></span>");
						    		$("#inputEmail").parent().removeClass().addClass("form-group has-error");
						    		check1 = false;
						    	}
						    }
						    , beforeSend: function() {
						    	$("#emailState").html("<img src='/resources/img/ajax-loader3.gif'>");
						    }
						});
						
						$("#emailState").html(successCss+"&nbsp;<spring:message code='sign.true' javaScriptEscape='true'/></span>");
						$("#inputEmail").parent().removeClass().addClass("form-group has-success");
						check1 = true;
					}else{
						$("#emailState").html(errorCss+"&nbsp;<spring:message code='sign.email_err3' javaScriptEscape='true'/></span>");
						$("#inputEmail").parent().removeClass().addClass("form-group has-error");
						check1 = false;
					}
				}else if(id == "inputPassword"){
					if($("#"+id).val().length < 6){
						$("#passwordState").html(errorCss+"&nbsp;<spring:message code='sign.passwd_err2' javaScriptEscape='true'/></span>");
						$("#inputPassword").parent().removeClass().addClass("form-group has-error");
					}else{
						$("#passwordState").html(successCss+"&nbsp;<spring:message code='sign.true' javaScriptEscape='true'/></span>");
						$("#inputPassword").parent().removeClass().addClass("form-group has-success");
						check2 = true;
					}
				}else if(id =="inputName"){
					$("#nameState").html(successCss+"&nbsp;<spring:message code='sign.true' javaScriptEscape='true'/></span>");
					$("#inputName").parent().removeClass().addClass("form-group has-success");
					check4 = true;
				}
			}
		}
		
		function checkId(id){
			if(id.length < 4){
				$("#idState").html("<span style='color:#BF0000;'><i class='glyphicon glyphicon-remove'></i>&nbsp;<spring:message code='sign.id_err3' javaScriptEscape='true'/></span>");
				$("#inputId").parent().addClass("form-group has-error");
				check3 = false;
			}else{
				var errorCss = "<span style='color:#BF0000;'><i class='glyphicon glyphicon-remove'></i>";
				var successCss = "<span style='color:#435743;'><i class='glyphicon glyphicon-ok'></i>";
				var data = "id="+id;
				$.ajax({
				    type : "get"
				    , url : "/checkId"
				    , data : data
				    , dataType : "text"
				    , timeout : 5000
				    , error : function(request, status, error) {
				    	
				    }
				    , success : function(response) {
				    	if(response == "true"){
				    		$("#idState").html(successCss+"&nbsp;<spring:message code='sign.true' javaScriptEscape='true'/></span>");
				    		$("#inputId").parent().removeClass().addClass("form-group has-success");
				    		check3 = true;
				    	}else{
				    		$("#idState").html(errorCss+"&nbsp;<spring:message code='sign.id_err2' javaScriptEscape='true'/></span>");
				    		$("#inputId").parent().removeClass().addClass("form-group has-error");
				    		check3 = false;
				    	}
				    }
				    , beforeSend: function() {
				    	$("#idState").html("<img src='/resources/img/ajax-loader3.gif'>");
				    }
				});
			}
		}
		
		/* 가입버튼 */
		function signup(){
			var f = document.getElementById("sign-form");
			if(check1 && check2 && check3 && check4){
				if($("input:radio[id='optionsGender']").is(":checked") != false){
					f.action = "/memberRegist";
					f.submit();
				}else{
					$("#signupButton").effect("shake",{times:2},200);
				}
			}else{
				$("#signupButton").effect("shake",{times:2},200);
			}		
		}
		function fn_press_han(obj)
	    {
	        if(event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46 ) return;
	        obj.value = obj.value.replace(/[\ㄱ-ㅎㅏ-ㅣ가-힣|\.|\/]/g, "");
	    }
		
		$("body").tooltip({
		    selector: '[data-toggle="tooltip"]',
		    'placement': 'top',
	        'container': 'body',
	        'trigger': "hover"
		});
	</script>
  </body>
</html>